<template>
  <div>
    <ul class="article" v-if="article.length > 0">
      <li v-for="(item, article_id) in article" :key="article_id">
        <!-- 文章图片 -->
        <div class="article-picture" v-if="item.article_picture">
          <img :src="item.article_picture" />
        </div>
        <!-- 文章有图显示 -->
        <div v-if="item.article_picture" class="article-have-picture">
          <!-- 文章标题 -->
          <div class="article-title">{{ item.article_title }}</div>
          <!-- 文章标签 -->
          <span class="article-label" v-if="item.original_or_reprint == 1">
            原创
          </span>
          <span
            class="article-label"
            v-else
            style="background-color: rgb(0 122 242 / 24%); color: #0c0b0d87"
          >
            转载
          </span>
          &nbsp;&nbsp; 发布时间{{
            timeDetal(item.article_createtime)
          }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
            item.article_view_count
          }}
          浏览量 · {{ item.article_like_count }} 点赞 ·
          {{ item.article_comment_count }} 评论
        </div>
        <!-- 文章无图显示 -->
        <div class="noPicture" v-else>
          <!-- 文章标题 -->
          <div class="article-title">{{ item.article_title }}</div>
          <!-- 文章标签 -->
          <span class="article-label" v-if="item.original_or_reprint == 1">
            原创
          </span>
          <span
            class="article-label"
            v-else
            style="background-color: rgb(0 122 242 / 24%); color: #0c0b0d87"
          >
            转载
          </span>
          &nbsp;&nbsp; 发布时间{{
            timeDetal(item.article_createtime)
          }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
            item.article_view_count
          }}
          浏览量 · {{ item.article_like_count }} 点赞 ·
          {{ item.article_comment_count }} 评论
        </div>

        <div class="article-article-function">
          <span @click="articleEditor(item.article_id)">编辑</span>
          <span @click="details(item.article_id)">浏览</span>
          <span @click="articleDelete(item)">删除</span>
        </div>
      </li>
    </ul>
    <el-empty :image-size="200" v-else></el-empty>
    <el-pagination
      v-if="article.length > 0"
      background
      layout="prev, pager, next"
      :total="pageNum * 10"
      @current-change="currentPage"
      :current-page="page"
    >
    </el-pagination>
  </div>
</template>

<script>
//引入混入
import { mixin } from "../../mixin";
export default {
  name: "AllArticles",
  data() {
    return {
      article: [], //文章列表
      page: 1, //页码（默认为1）
      pageNum: "10",
      status: "2",
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  methods: {
    // 编辑博客
    articleEditor(id) {
      this.$router.push({
        name: "WriteBlog",
        query: {
          id: id,
        },
      });
    },
    // 切换后页码
    currentPage(val) {
      this.page = val;
      this.articLoad();
    },
    //文章加载
    articLoad(Url, uid) {
      var obj;
      if (uid) {
        obj = {
          pageNum: this.page, //页码（默认为1）
          pageSize: 10,
          uid: uid,
        };
      } else {
        obj = {
          pageNum: this.page, //页码（默认为1）
          pageSize: 10,
        };
      }
      this.$http({
        method: "post",
        url: Url,
        params: obj,
      }).then(({ data }) => {
        console.log(data);
        if (data.flag) {
          console.log(8888, data);
          if (data.data.total > 0) {
            this.article = data.data.list;
            this.pageNum = Math.ceil(data.data.total / 10);
          } else {
            this.article = "";
            this.pageNum = 1;
          }
        } else {
          console.log("文章加载失败!");
        }
      });
    },
    //文章删除
    articleDelete(item) {
      this.$confirm("确定把该博客转移到回收站?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            method: "post",
            xhrFields: { withCredentials: true },
            url: "article/deleteToreCycleBin",
            params: {
              article_id: item.article_id,
              uid: this.$store.getters.getLoginxMessage.uid,
            },
          }).then(({ data }) => {
            if (data.flag) {
              this.articLoad();
              this.$message.success("文章删除成功!");
            } else {
              this.$message.warning("文章删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除文章！");
        });
    },
    //
    dataLoad() {
      if (this.status == 2) {
        //查看所有文章
        this.articLoad("article/findUserArticle");
      } else if (this.status == 1) {
        //查看所有已发布的公开文章
        //获取uid
        const uid = JSON.parse(sessionStorage.getItem("LoginMessage")).message
          .uid;
        this.articLoad("article/findUserPublicArticle", uid);
      } else if (this.status == 0) {
        //查看私密的文章
        this.articLoad("article/findUserPrivateArticle");
      }
    },
  },
  watch: {
    $route() {
      //监听到路由（参数）改变
      this.status = this.$route.query.status;
      this.dataLoad();
    },
  },
  mounted() {
   if(this.$route.query.status){
      this.status = this.$route.query.status;
   
   }else{
     this.dataLoad();
   }
   
    
  
  },
};
</script>

<style lang="less" scoped>
// 设置文章列表样式
.article {
  width: 100%;
  li {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #e4e7ed;
    color: #4b4a4a;
    font-size: 14px;
    position: relative;
    &:last-child {
      margin-bottom: 30px;
    }
    //文章图片样式
    .article-picture {
      width: 150px;
      height: 100px;
      border: 1px solid #fafafa;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    //文章标题
    .article-title {
      width: 100%;
      font-size: 18px;
      letter-spacing: 2px;
      margin: 10px 0px;
      color: #302f2f;
      margin-bottom: 60px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    //文章摘要
    .article-abstract {
      margin: 20px 0px;
      width: 100%;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    //文章标签
    .article-label {
      width: 30px;
      font-size: 12px;
      height: 15px;
      padding: 3px;
      text-align: center;
      background-color: rgba(227, 62, 51, 0.1);
      color: #e33e33;
    }
    //文章有图片
    .article-have-picture {
      padding-left: 170px;
    }
  }
}
//文章功能
.article-article-function {
  position: absolute;
  bottom: 15px;
  right: 10px;
  span {
    margin: 0px 10px;
    cursor: pointer;
    &:hover {
      color: rgba(255, 0, 0, 0.589);
    }
  }
}

.el-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
  //   margin-top: 50px;
}
</style>